<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" type="images/x-icon" href="/static/image/b.png"/>
    <title>用户设置</title>
</head>


<link rel="stylesheet" href="/static/css/font/iconfont.css"/>
<link rel="stylesheet" href="/static/css/userpage.css">
<link rel="stylesheet" href="/static/css/floatbar.css">
<link rel="stylesheet" href="/static/css/font.css"/>
<script src="/static/js/store.js"></script>


<style type="text/css">

    input{
        width: 12vw; height: 2vw;
        padding-left: 10px;
    }
    .right {
        width: 62vw;
        height: 100vh;
        float: right;
        margin-top: -75vh;
        margin-right: 11vw;
        padding-left: 2.5vw;
        box-sizing: border-box;
        background-color: white;
        border-radius: 3px;
    }

    .right button {
        height: 25px;
        border: none;
        color: white;
    }

    .right table{
        width: 57vw;
        height: 60vh;
        margin-top: 20px;
        font-size: 15px;
        color: gray;
    }
    .right td{
        height: 7vh;
        border-bottom: 1px solid gainsboro;
    }
    .right table tr{

    }

    h4 {
        color: #515151;
    }

    button {
        background-color: #4773c8;
        border-radius: 3px;
        width: 5vw;
    }

    .left_middle a:nth-child(2) li{
        background: linear-gradient(to right, rgba(27, 32, 41, 1.0) 10%, rgba(62, 96, 153, 1.0) 50%, rgba(27, 32, 41, 1.0) 100%);
        color: white;
        font-weight: 600;
    }
    .add{
        width: 26vw;
        border-radius: 20px;
        line-height: 3vw;
        background-color: #374866;
        border: 1px solid #6c84a7;
        text-align: center;
        position: absolute;
        top: 20vw; left: 40vw;
        padding: 20px 20px;
        display: none;
    }
    .headImgTd img{
        border-radius: 50%;
    }
</style>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".namebtn").click(function(){
            $(".add span").html(" ");
            $(this).next().css("display","block");
        });
        $(".tellbtn").click(function(){
            $(".add span").html(" ");
            $(this).next().css("display","block");
        });
        $(".passbtn").click(function(){
            $(".add span").html(" ");
            $(this).next().css("display","block");
        });
        $(".btnnone").click(function(){
            $(".add").css("display","none");
        });
        //修改昵称
        var nameval = $("input[name='username']").val();
        $("input[name='username']").blur(function(){
           if(nameval==null||nameval==""){
               $(".add span").html("昵称不能为空");
           }else{
               if($(this).val()==nameval){
                   $(".add span").html("请修改昵称");
               }else{
                   $(".add span").html(" ");
                   $(".sub").attr("type","submit");
               }
           }
        });
        //修改电话号码
        var tellval = $("input[name='tellphone']").val();
        $("input[name='tellphone']").blur(function(){
            var uPattern = /^1[3-9]\d{9}$/;
            if(tellval!=null||tellval!=""){
                if(uPattern.test(tellval)){
                    if($(this).val()==tellval){
                        $(".add span").html("请修改电话号码");
                    }else{
                        $(".add span").html(" ");
                        $(".sub").attr("type","submit");
                    }
                }else{
                    $(".add span").html("号码格式输入错误");
                }
            }else{
                $(".add span").html("号码不能为空");
            }
        });
        //修改密码
        var pwd1val = " ";
        var pwd2val = " ";
        var pwd3val = " ";
        $("input[name='pwd1']").blur(function(){
            pwd1val = $(this).val();
            if(pwd1val!=null||pwd1val!=""){

            }else{
                $(".add span").html("密码不能为空");
            }
        });
        $("input[name='pwd2']").blur(function(){
            pwd2val = $(this).val();
            var pwdPattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,15}$/;
            if(pwd2val==null||pwd2val==""){
                $(".add span").html("密码不能为空");
            }else{
                if(!pwdPattern.test(pwd2val))$(".add span").html("密码必须为6到15位字母加数字的组合");
            }
        });
        $("input[name='pwd3']").blur(function(){
            pwd3val = $(this).val();
            if((pwd1val==null||pwd1val=="")&&(pwd2val==null||pwd2val=="")&&(pwd3val==null||pwd3val=="")){
                $(".add span").html("密码不能为空");
            }else{
                if(pwd2val==pwd3val){
                    $(".add span").html(" ");
                    $(".sub").attr("type","submit");
                }else{
                    $(".add span").html("第二次输入密码与第一次不同");
                }
            }
        });
    });
</script>
<body>
<div class="top">
    <iframe src="${pageContext.request.contextPath }/goods/head" scrolling="no" width="100%" height="71px" frameborder="0" name="open"
            id="userTop"></iframe>
</div>
<div class="down">
    <div class="left">
        <div class="left_top">
            <c:if test="${empty sessionScope.userNow.headPath}">
                <img src="/static/image/defaultHead.png" width="72px" height="72px">
            </c:if>
            <c:if test="${not empty sessionScope.userNow.headPath}">
                <img src="${sessionScope.userNow.headPath}" width="72px" height="72px">
            </c:if>
            <c:if test="${not empty sessionScope.userNow.username}">
                <h3>${sessionScope.userNow.username}</h3>
            </c:if>
            <c:if test="${empty sessionScope.userNow.username}">
                <h3>${sessionScope.userNow.tellphone}</h3>
            </c:if>
        </div>
        <div class="left_middle">
            <a href="${pageContext.request.contextPath }/user/center"><li><i class="iconfont icon-qianbao"></i>&nbsp;我的钱包</li></a>
            <a href="${pageContext.request.contextPath }/user/setting"><li><i class="iconfont icon-shezhi"></i>&nbsp;账号设置</li></a>
            <a href="${pageContext.request.contextPath }/user/info"><li><i class="iconfont icon-xiaoxi"></i>&nbsp;消息中心</li></a>
            <a href="${pageContext.request.contextPath }/user/collect"><li><i class="iconfont icon-shoucang"></i>&nbsp;我的收藏</li></a>
            <a href="${pageContext.request.contextPath }/user/coupon"><li><i class="iconfont icon-Coupons"></i>&nbsp;权益卡券</li></a>
            <a href="${pageContext.request.contextPath }/user/feedback"><li><i class="iconfont icon-kefu"></i>&nbsp;联系客服</li></a>
        </div>
    </div>
    <div class="right">
        <!-- 用户信息修改提交表单 -->
        <form action="/user/updateUser" method="post">
        <!-- 账号设置 -->
        <table  cellpadding="0" cellspacing="0">
            <tr>
                <td style="border:none;">
                    <h4>基本设置</h4>
                </td>
            </tr>
            <tr>
                <td>头像</td>
                <c:if test="${empty sessionScope.userNow.headPath}">
                    <td class="headImgTd"><img src="/static/image/defaultHead.png" width="46px" height="46px"></td>
                </c:if>
                <c:if test="${not empty sessionScope.userNow.headPath}">
                    <td class="headImgTd"><img src="${sessionScope.userNow.headPath}" width="46px" height="46px"></td>
                </c:if>
                <td></td>
            </tr>
            <tr>
                <td>昵称</td>
                <td class="nametd">${sessionScope.userNow.username}</td>
                <td>
                    <button class="namebtn" type="button">修改昵称</button>
                    <div class="add">
                        <input type="text" name="username" value="${sessionScope.userNow.username}" placeholder="添加新昵称"/><br>
                        <span style="color: red"></span><br>
                        <button class="btnnone" type="button">取消</button>
                        <button class="sub" type="button">确定</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <h4 style="border: none;">安全设置</h4>
                </td>
                <td class="td" id=""></td>
                <td></td>
            </tr>
            <tr>
                <td>手机账号</td>
                <td class="telltd">${sessionScope.userNow.tellphone}</td>
                <td>
                    <button class="tellbtn" type="button">修改手机号</button>
                    <div class="add">
                        <input type="text" name="tellphone" value="${sessionScope.userNow.tellphone}" placeholder="添加新号码"/><br>
                        <span style="color: red"></span><br>
                        <button class="btnnone" type="button">取消</button>
                        <button class="sub" type="button">确定</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>实名认证</td>
                <td class="td" style="color:red;">未认证</td>
                <td>
                    <button type="button">实名认证</button>
                </td>
            </tr>
            <tr>
                <td>密码设置</td>
                <td class="passtd"></td>
                <td>
                    <input type="hidden" name="id" value="${sessionScope.userNow.id}"/>
                    <input type="hidden" name="password" value="${sessionScope.userNow.password}"/>
                    <button class="passbtn" type="button">修改密码</button>
                    <div class="add">
                        <input type="password" name="oldPwd" placeholder="输入旧密码"/><br>
                        <input type="password" name="newPwd" placeholder="输入新密码"/><br>
                        <input type="password" name="pwd3" placeholder="再次输入新密码"/><br>
                        <span style="color: red"></span><br>
                        <button class="btnnone" type="button">取消</button>
                        <button class="sub" type="button">确定</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Steam ID</td>
                <td>${sessionScope.userNow.tellphone}</td>
                <td>
                    <button type="button">绑定</button>
                </td>
            </tr>
            <tr>
                <td>API key</td>
                <td ><input type="text" placeholder="请输入API key"/>前往Steam获取</td>
                <td>
                    <button type="button">保存</button>
                </td>
            </tr>
            <tr>
                <td>交易链接</td>
                <td id="border"><input type="text">前往Steam获取</td>
                <td>
                    <button type="button">保存</button>
                </td>
            </tr>
            <tr>
                <td>微信公众号</td>
                <td class="td">打开微信通知，交易提醒不错过</td>
                <td>
                    <button type="button">打开通知</button>
                </td>
            </tr>
        </table>
        </form>
    </div>
    <div class="tail">
        <iframe src="${pageContext.request.contextPath }/goods/tail" scrolling="no" width="100%" height="324px" frameborder="0"></iframe>
    </div>


    <div class="floatbar">
        <a href="">
            <div class="Icontext"><span class="iconfont icon-shouji"></span><br/>
                <font size="1">App</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-xingxing"></span><br/>
                <font size="1" color="#95959">收藏</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-weixin"></span><br/>
                <font size="1" color="#95959">公众号</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-weibo"></span><br/>
                <font size="1" color="#95959">微博</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-wenhao"></span><br/>
                <font size="1" color="#95959">帮助</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-duanxin"></span><br/>
                <font size="1" color="#95959">客服</font>
            </div>
        </a>
        <a href="javascript:scroll(0,0);">
            <div class="backTop"><span class="iconfont icon-sanjiaoxing_shang"></span><br/>
                <font size="2" color="#95959">TOP</font>
            </div>
        </a>
    </div>

    <%-- 用户信息悬浮框 --%>
    <div class="store" id="store">
        <div class="store-info">
            <div class="store-user">
                <div class="store-user-img">
                    <c:if test="${empty sessionScope.userNow.headPath}">
                        <img src="../static/image/defaultHead.png" width="52px" height="52px"/>
                    </c:if>
                    <c:if test="${not empty sessionScope.userNow.headPath}">
                        <img src="${sessionScope.userNow.headPath}" width="52px" height="52px"/>
                    </c:if>
                </div>
                <div class="store-user-name">
                    <c:if test="${not empty sessionScope.userNow.username}">
                        <h4>${sessionScope.userNow.username}</h4>
                    </c:if>
                    <c:if test="${empty sessionScope.userNow.username}">
                        <h4>${sessionScope.userNow.tellphone}</h4>
                    </c:if>
                    <p><a href="/user/logout">注销</a></p>
                </div>
            </div>
            <div class="store-account">
                <div class="balance">余额
                    <span>￥${sessionScope.userNow.balance}</span>
                </div>
                <div class="topUp">
                    <a href="${pageContext.request.contextPath }/user/center">充值</a>
                </div>
            </div>
        </div>
    </div>

</div>

</body>
</html>

